<template>
	<!-- 搜索框 -->
	<view class="body">
		<view class="search-box">
			<uni-search-bar @confirm="confirmSearch" @input="input" placeholder="请输入搜索内容" :radius="100"
				cancel-button="none" :focus="true"></uni-search-bar>
		</view>
		<!-- 搜索建议列表 -->
		<view class="sugg-list" v-if="kw.length !== 0">
			<view class="sugg-item" v-for="(item,index) in searchRes" :key="index" @click="gotoDetail(item)">
				<view class="lose-name">{{item.name}}</view>
				<uni-icons type="right" size="15"></uni-icons>
			</view>
		</view>
		<!-- 搜索历史 -->
		<view class="history-box" v-else>
			<!-- 标题区域 -->
			<view class="history-title">
				<text>搜索历史</text>
				<uni-icons type="trash" size="20" @click="clean"></uni-icons>
			</view>
			<!-- 列表区域 -->
			<view class="history-list">
				<view class="history-list-item" v-for="(item,i) in historys" :key="i" @click="toSearchLog(item)">
					<!-- 自带的标签 -->
					<uni-tag :text="item"> </uni-tag>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		http
	} from '../../API/request.js';
	const timer = ref(null)
	const kw = ref('')
	const historyList = ref([])
	const searchRes = ref([])
	// 计算属性
	const historys = computed(() => {
		// set 创建一个包含原本内容的且每个内容唯一的新数组，reverse（）是倒置方法，将第一个元素放到最后一个
		return [...new Set([...historyList.value].reverse())]
	})
	// 事件
	const input = (e) => {
		// 定时函数防抖，触发input后，先清除定时器id timer,然后在实行定时函数，在这期间又触发ipnut后，再次重新执行定时函数
		clearTimeout(timer.value)
		timer.value = setTimeout(() => {
			kw.value = e
			// 正则替换所有空白字符
			kw.value = kw.value.replace(/\s*/g, "")
			if (kw.value !== '') {
				historyList.value.push(kw.value)
				uni.setStorageSync('history', JSON.stringify(historys.value))
				http.get('searchLose', {
					params: {
						name: kw.value
					}
				}).then((res) => {
					const {
						data
					} = res
					searchRes.value = data
				})
			}
		}, 500)
	}

	const toSearchLog = (e) => {
		const name = e
		uni.navigateTo({
			url: `/subpkg/searchResult/searchResult?name=${JSON.stringify(name)}`
		})
	}
	const confirmSearch = (e) => {
		const searchKeyword = e.value;
		uni.navigateTo({
			url: `/subpkg/searchResult/searchResult?name=${JSON.stringify(searchKeyword)}`
		})
	}
	// 跳转到detail页面
	const gotoDetail = (e) => {
		const info = {
			_id: e._id
		}
		uni.navigateTo({
			url: `/subpkg/lose-Detail/lose-Detail?_id=${info._id}`
		})
	}
	// 清除历史
	const clean = () => {
		historyList.value = []
		uni.removeStorageSync('history');
	}
	onLoad(() => {
		historyList.value = JSON.parse(uni.getStorageSync('history') || '[]')
	})
</script>

<style lang="less">
	.body {
		width: 100vw;
		height: 100vh;
		background-color: #fff;

		.search-box {
			position: sticky;
			top: 0;
			z-index: 999;
		}

		.history-box {
			padding: 0 10px;

			.history-title {
				display: flex;
				justify-content: space-between;
				height: 40px;
				align-items: center;
				font-size: 13px;
				border-bottom: 1px solid #efefef;
			}

			.history-list {
				display: flex;
				flex-wrap: wrap;

				.history-list-item {
					margin-top: 5px;

					.uni-tag {
						background-color: #efefef;
						color: #000000;
						margin-top: 5px;
						margin-right: 5px;
						border: none;
					}
				}

			}
		}

		.sugg-list {
			padding: 0 5px;

			.sugg-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 12px;
				padding: 13px 0;
				border-bottom: 1px solid #efefef;

				.goods-name {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;

				}
			}
		}

	}
</style>